/* 清除样式 */
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dt,
dd,
ol,
ul,
li,
hr,
fieldset,
form,
label,
legend,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
hgroup {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  font-family: 'Microsoft YaHei', 微软雅黑, 'Helvetica Neue', 'Hiragino Sans GB', 'Helvetica Neue', 'WenQuanYi Micro Hei', SimSun, sans-serif, 'Lantinghei SC', STHeiti, 'Open Sans', Arial;
  outline: none;
}

input {
  font-family: "Microsoft YaHei", "微软雅黑", "\5FAE\8F6F\96C5\9ED1" "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif, "Lantinghei SC";
  cursor: pointer;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  -webkit-appearance: none;
  outline: none;
  border: none;
}

input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
button:focus {
  -webkit-appearance: none;
  outline: none;
  border: none;
}

a {
  color: #414141;
  text-decoration: none;
  outline: none;
}

/* a:hover,
    a:active,
    a:focus {
        color: #D7382D;
    } */

header,
nav,
section,
article,
footer,
figure,
figcaption {
  display: block;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
}

i,
em,
u,
b {
  font-style: normal;
  font-weight: normal;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  border: none;
}

.hide {
  display: none;
}

.hid {
  display: none !important;
}

.por {
  position: relative;
}

html,
body,
.container{
  width: 100%;
  height: 100%;
}

/* header */
.container{
  position: relative;
}
.header {
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #303030;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999999999;
}
.header_left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header_left .header_left_icon{
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header_left .header_left_icon i {
  display: block;
  width: 24px;
  height: 22px;
  background: url('../images/pubg_tactics/home.png') no-repeat;
  background-size: 100%;
}
.header_left p {
  display:block;
  font-family: FZLTTHJW--GB1-0;
  font-size: 16px;
  color: #AAAAAA;
}
.header_mid p {
  max-width: 300px;
  padding:0 20px;
  height: 60px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #AAAAAA;
  text-align: center;
  background: #3D3D3D;
  text-align: center;
  line-height: 60px;
}
.header_right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header_right .header_keep {
  width: 80px;
  height: 32px;
  background: #1972CF;
  border-radius: 4px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  line-height: 32px;
}
.header_right .header_screen {
  width: 80px;
  height: 32px;
  background: #494949;
  border-radius: 4px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  line-height: 32px;
  margin: 0 8px;
}
.header_right .header_eye {
  width: 32px;
  height: 32px;
  background: #494949;
  border-radius: 4px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.header_right .header_eye em{
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('../images/pubg_tactics/garyeye.png') no-repeat;
  background-size: 100% 100%;
}

.header_right .header_eye .lighteye {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('../images/pubg_tactics/lighteye.png') no-repeat;
  background-size: 100% 100%;
}
/* left */
.left {
  position: fixed;
  top:0;
  left: 0;
  width: 60px;
  height: 100%;
  background: #3D3D3D;
  box-shadow: 4px 0 8px 0 rgba(0,0,0,0.06);
  z-index: 99999999;
}
.left_main {
  padding-top: 60px;
}
.left_list {
  position: relative;
  width: 100%;
  height: 60px;
}
.list_top {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list_top img {
  width: 15px;
  height: 15px;
  margin-bottom: 5px;
}
.list_top p {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #AAAAAA;
}
.list_main {
  position: absolute;
  top:0;
  left: 60px;
  background: #303030;
  border: 2px solid #2B2B2B; 
}
.onblack {
  background: #282828 !important;
}
/* 画笔 */
.pen {
  width: 108px;
  padding: 10px;
  box-sizing: border-box;
}
.pen_title {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #AAAAAA;
  margin-bottom: 8px;
}
/* 画笔样式 */
.pen_style {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.pen_line {
  width: 24px;
  height: 24px;
  border: 1px solid #3C3C3C;
  margin-right: 8px;
  text-align: center;
  line-height: 24px;
  margin-bottom: 8px;
}
.pen_line .pen_lineone {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('../images/pubg_tactics/penline.png') no-repeat;
  block-size: 100% 100%;
}
.pen_line .pen_linetwo {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('../images/pubg_tactics/penliner.png') no-repeat;
  block-size: 100% 100%;
}
/* 画笔大小 */
.pen_size_con {
  width: 88px;
  height: 24px;
  border: 1px solid #3C3C3C;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pen_size_con em {
  display:block;
  background: #aaa;
  width: 74px;
}
.pen_size_big {
  height: 8px;
}
.pen_size_mid {
  height: 6px;
}
.pen_size_mini {
  height: 2px;
}
/* 画笔颜色 */
.pen_color {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.pen_color_con {
  width: 24px;
  height: 24px;
  border: 1px solid #3C3C3C;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pen_color_con em {
  display: block;
  width: 14px;
  height: 14px;
}
.pen_color_con .pen_color_l11 {
  background: #E52B2B !important;
}
.pen_color_con .pen_color_l12 {
  background: #E57A2B !important;
}
.pen_color_con .pen_color_l13 {
  background: #C7D90B !important;
}
.pen_color_con .pen_color_l21 {
  background: #7ACF21 !important;
}
.pen_color_con .pen_color_l22 {
  background: #23D990 !important;
}
.pen_color_con .pen_color_l23 {
  background: #4983FF !important;
}
.pen_color_con .pen_color_l31 {
  background: #865CFF !important;
}
.pen_color_con .pen_color_l32 {
  background: #B247EB !important;
}
.pen_color_con .pen_color_l33 {
  background: #EB3AA0 !important;
}
/* 标记 */
.onlight {
  background: #282828 !important;
  opacity: 1 !important;
}
.mark {
  width: 108px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.mark_con {
  width: 24px;
  height: 24px;
  border: 1px solid #3C3C3C;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
}
.mark_con em {
  display: block;
  width: 15px;
  height: 15px;
}
/* 旗帜 */
.mark_con .mark_icon11 {
  background: url('../images/pubg_tactics/flagred.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon12 {
  background: url('../images/pubg_tactics/flaggreen.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon13 {
  background: url('../images/pubg_tactics/flagblue.png') no-repeat;
  background-size: 100% 100%;
}
/* 星星 */
.mark_con .mark_icon21 {
  background: url('../images/pubg_tactics/starred.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon22 {
  background: url('../images/pubg_tactics/stargreen.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon23 {
  background: url('../images/pubg_tactics/starblue.png') no-repeat;
  background-size: 100% 100%;
}
/* 坐标 */
.mark_con .mark_icon31 {
  background: url('../images/pubg_tactics/markred.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon32 {
  background: url('../images/pubg_tactics/markgreen.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon33 {
  background: url('../images/pubg_tactics/markblue.png') no-repeat;
  background-size: 100% 100%;
}
/* 圆 */
.mark_con .mark_icon41 {
  background: url('../images/pubg_tactics/circularred.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon42 {
  background: url('../images/pubg_tactics/circulargreen.png') no-repeat;
  background-size: 100% 100%;
}
.mark_con .mark_icon43 {
  background: url('../images/pubg_tactics/circularblue.png') no-repeat;
  background-size: 100% 100%;
}
/* 注释 */
.text {
  width: 108px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.text_con {
  width: 88px;
  height: 36px;
  border: 1px solid #3C3C3C;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
}
.text_con em {
  display: block;
  width:76px;
  height: 24px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 24px;
}
.text_con .text_bgyellow {
  background: #FFDA18;
  color: #000 !important;
}
.text_con .text_bgred{
  background: #FF4E4E;
}
.text_con .text_bgblue{
  background: #45B1FF;
}
/* 毒圈 */
.circular {
  width: 176px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.circular_con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
.circular_con_text {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #aaa;
}
.circular_con_top {
  width: 64px;
  height: 64px;
  border: 1px solid #3C3C3C;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
}
.circular_con_top em {
  display: block;
  border: 1px solid #fff;
  border-radius: 50%;
}
.circular_con_top .circular_con11 {
  width: 44px;
  height: 44px;
}
.circular_con_top .circular_con12 {
  width: 40px;
  height: 40px;
}
.circular_con_top .circular_con21 {
  width: 36px;
  height: 36px;
}
.circular_con_top .circular_con22 {
  width: 32px;
  height: 32px;
}
.circular_con_top .circular_con31 {
  width: 28px;
  height: 28px;
}
.circular_con_top .circular_con32 {
  width: 24px;
  height: 24px;
}
.circular_con_top .circular_con41 {
  width: 20px;
  height: 20px;
}
.circular_con_top .circular_con42 {
  width: 16px;
  height: 16px;
}
/* 退出全屏 */
.gomini {
  position: fixed;
  top: 10px;
  right: 20px;
  display: block;
  width: 78px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  background: #494949;
  border-radius: 4px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  z-index: 999999999;
}
/* 增加顶部问号标志 */
.ques {
  display: block;
  width: 16px;
  height: 16px;
  background: url('../images/pubg_tactics/ques.png') no-repeat;
  background-size: 100% 100%;
  margin-left: 8px;
}
/* 新增logo */
.logo {
  width: 90px;
  height: 24px;
}
.line {
  width: 1px;
  height: 20px;
  background: #595959;
  margin: 0 6px;
}